// 详情页逻辑

// 0. 获取元素
const infoBox = document.querySelector('.info')
const detailBox = document.querySelector('.detail')


// 1. 拿到 sessionStorage 内的 id 信息
const goodsId = window.sessionStorage.getItem('goods_id')


// 2. 根据 goodsId 去请求商品详情
getGoodsInfo()
async function getGoodsInfo() {

  const res = await pAjax({
    url: 'http://localhost:8888/goods/item',
    data: `id=${goodsId}`,
    dataType: 'json',
  })

  console.log(res)

  // 渲染页面
 
  infoBox.innerHTML = `
  <div class="left">
  <!-- 放大镜 -->
  <div class="box1" id="box1">
     <!-- 展示图片的盒子 -->
         <div class="show">
                 <img src=" ${ res.info.img_big_logo }">
                 <div class="mask">
                 </div>
         </div>
     <!-- 列表盒子 -->
         <div class="list">
             <p class="active">
                 <img
                 src=" ${ res.info.img_big_logo }"
                 data-show=" ${ res.info.img_big_logo }"
                 data-enlarge=" ${ res.info.img_big_logo }"
                 alt="">
             </p> 
         </div>
     <!-- 放大的盒子 -->
     <div class="enlarge"></div>
  
 </div>
</div>
    <div class="right">
      <div class="desc">${ res.info.title }</div>
      <div class="price1" style="background-color: gray;">￥${res.info.price}</div>
      <div class="price">￥ ${ res.info.current_price }</div>
      <h4 style="background-color: red; font-weight: 100; width: 200px;">销售折扣：${res.info.sale_type}</h4>

      <p style="font-size: 16px;">服务承诺
            正品保证 极速退款 退货运费险 <br>七天无理由退换</p>
      <button>加入购物车</button>
    </div>


  `

  detailBox.innerHTML = res.info.goods_introduce
  
  new Enlarge('#box1')

}

